<template>
  <div class="music-list">
        <div class="rcmd-c">
            <div class="c-list">
                <div class="c-item" v-for="item in recommendData" :key="item.id" :style="'width:' +  cItemWidth">
                    <div class="item-t">
                        <!-- <img :src="require(item.imgUrl)"> -->
                        <img :src="require(`../../assets/images/songSheet0${item.imgIdx}.jpg`)">
                        <i v-if="item.isBoutique"></i>
                        <router-link to="javascript:;"></router-link>
                        <div class="item-t-b">
                            <router-link to="javascript:;"></router-link>
                            <i></i>
                            <span>{{ item.synopsis }}</span>
                        </div>
                    </div>
                    <div class="item-b">
                        <i v-if="item.isRadioProgram"></i>
                        <span @click="songlist(item.imgIdx, item.songListId)">{{ item.name }}</span>
                        <p class="author" v-if="showAuthor"><span>by</span>{{ item.createTime }}</p>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
export default {
    props: {
        recommendData: Array,
        rowNum: {
            type: Number,
            default: 4
        },
        titleWrap: {
            type: Boolean,
            default: false
        },
        showAuthor: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            cItemWidth: (100 / this.rowNum) + '%',
            titleNoWrapStyle: 'white-space: nowrap;overflow: hidden;text-overflow: ellipsis;'
        }
    },
    methods: {
      songlist(imgIdx, songListId){
       this.$router.push({path:`/songlist/${imgIdx}/${songListId}`})
      }
    },
}
</script>
<style lang="less" scoped>
    .music-list {
        .rcmd-c {
            margin-top: 20px;
            .c-list {
                display: flex;
                flex-wrap: wrap;
                .c-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .item-t {
                        position: relative;
                        width: 140px;
                        height: 140px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                        &>i {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 40px;
                            height: 40px;
                            background: url(../../assets/images/icon2.png) no-repeat -135px -220px;
                        }
                        &>a {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background: url(../../assets/images/coverall.png) no-repeat 0 0;
                        }
                        .item-t-b {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 100%;
                            height: 27px;
                            background: url(../../assets/images/coverall.png) no-repeat 0 -537px;
                            color: #ccc;
                            a {
                                position: absolute;
                                right: 10px;
                                bottom: 5px;
                                width: 16px;
                                height: 17px;
                                background: url(../../assets/images/iconall.png) no-repeat 0 0;
                            }
                            i {
                                float: left;
                                margin: 9px 5px 9px 10px;
                                width: 14px;
                                height: 11px;
                                background: url(../../assets/images/iconall.png) no-repeat 0 -24px;
                            }
                            span {
                                float: left;
                                margin: 7px 0 0 0;
                            }
                        }
                    }
                    .item-b {
                        margin: 8px 0 40px;
                        width: 140px;
                        font-size: 14px;
                        span {
                            display: inline-block;
                            vertical-align: middle;
                            color: #000;
                            box-sizing: border-box;
                            width: 140px;
                            cursor: pointer;
                            i {
                                display: inline-block;
                                margin-top: -1px;
                                margin-right: 3px;
                                vertical-align: middle;
                                width: 35px;
                                height: 15px;
                                background: url(../../assets/images/icon.png) no-repeat -31px -658px;
                            }
                            &:hover {
                                color: #000 !important;
                                text-decoration: underline;
                            }
                        }
                        .author {
                            margin: 5px 0;
                            font-size: 12px;
                            color: #999;
                            span {
                                display: inline-block;
                                margin-right: 5px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>